<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RoleRealm - 用户设置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Inter', sans-serif;
            background: #f8fafc;
            min-height: 100vh;
        }

        .header {
            background: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .logo {
            color: #1e3a8a;
            font-size: 24px;
            font-weight: bold;
        }

        .header-actions {
            display: flex;
            gap: 15px;
        }

        .header-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            background: #f8fafc;
            color: #1e3a8a;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .header-btn:hover {
            background: #e5e7eb;
        }

        .header-btn.primary {
            background: #f59e0b;
            color: white;
        }

        .header-btn.primary:hover {
            background: #d97706;
        }

        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 20px;
            padding: 20px;
        }

        .settings-nav {
            background: #1e3a8a;
            border-radius: 15px;
            padding: 20px;
            height: fit-content;
        }

        .nav-title {
            color: white;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .nav-item {
            display: block;
            padding: 12px 16px;
            color: #e5e7eb;
            text-decoration: none;
            border-radius: 10px;
            margin-bottom: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .nav-item.active {
            background: #f59e0b;
            color: white;
        }

        .settings-content {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .content-title {
            font-size: 24px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 30px;
            padding: 20px;
            background: #f8fafc;
            border-radius: 15px;
        }

        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
        }

        .user-details h3 {
            color: #1e3a8a;
            font-size: 20px;
            margin-bottom: 5px;
        }

        .user-details p {
            color: #6b7280;
            font-size: 14px;
        }

        .settings-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 18px;
            font-weight: bold;
            color: #374151;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e5e7eb;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 14px;
            font-weight: bold;
            color: #374151;
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            background: white;
            cursor: pointer;
        }

        .form-select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .checkbox {
            width: 18px;
            height: 18px;
            accent-color: #3b82f6;
        }

        .checkbox-label {
            font-size: 14px;
            color: #374151;
            cursor: pointer;
        }

        .slider-group {
            margin-bottom: 20px;
        }

        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .slider {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: #e5e7eb;
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
            border: none;
        }

        .slider-value {
            min-width: 40px;
            text-align: center;
            font-size: 14px;
            color: #374151;
            font-weight: bold;
        }

        .button-group {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background: #f59e0b;
            color: white;
        }

        .btn-primary:hover {
            background: #d97706;
        }

        .btn-secondary {
            background: #e5e7eb;
            color: #374151;
        }

        .btn-secondary:hover {
            background: #d1d5db;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background: #dc2626;
        }

        .history-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .history-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

        .history-item:hover {
            background: #f8fafc;
            border-color: #3b82f6;
        }

        .history-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            font-weight: bold;
        }

        .history-info {
            flex: 1;
        }

        .history-character {
            font-size: 14px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 4px;
        }

        .history-time {
            font-size: 12px;
            color: #6b7280;
        }

        .history-actions {
            display: flex;
            gap: 8px;
        }

        .history-action {
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .history-action.primary {
            background: #3b82f6;
            color: white;
        }

        .history-action.danger {
            background: #ef4444;
            color: white;
        }

        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .favorite-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .favorite-item:hover {
            background: #f8fafc;
            border-color: #3b82f6;
        }

        .favorite-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #3b82f6, #1e3a8a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            font-weight: bold;
        }

        .favorite-info {
            flex: 1;
        }

        .favorite-name {
            font-size: 14px;
            font-weight: bold;
            color: #1e3a8a;
            margin-bottom: 4px;
        }

        .favorite-category {
            font-size: 12px;
            color: #6b7280;
        }

        .favorite-remove {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            background: #ef4444;
            color: white;
            font-size: 12px;
            cursor: pointer;
        }

        .success-message {
            background: #d1fae5;
            color: #065f46;
            padding: 12px 16px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
        }

        .error-message {
            background: #fee2e2;
            color: #991b1b;
            padding: 12px 16px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
        }

        @media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr;
                padding: 10px;
            }
            
            .settings-nav {
                order: 2;
            }
            
            .user-info {
                flex-direction: column;
                text-align: center;
            }
            
            .button-group {
                flex-direction: column;
            }
            
            .favorites-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-content">
            <div class="logo">RoleRealm</div>
            <div class="header-actions">
                <button class="header-btn" onclick="window.location.href='character-selection.html'">返回首页</button>
                <button class="header-btn primary" onclick="window.location.href='login.html'">退出登录</button>
            </div>
        </div>
    </header>

    <div class="main-container">
        <nav class="settings-nav">
            <h3 class="nav-title">设置</h3>
            <a href="#" class="nav-item active" data-section="profile">个人资料</a>
            <a href="#" class="nav-item" data-section="voice">语音偏好</a>
            <a href="#" class="nav-item" data-section="history">对话历史</a>
            <a href="#" class="nav-item" data-section="favorites">收藏角色</a>
        </nav>

        <main class="settings-content">
            <div class="success-message" id="successMessage">设置已保存</div>
            <div class="error-message" id="errorMessage">保存失败，请重试</div>

            <!-- 个人资料设置 -->
            <div id="profile-section" class="settings-section">
                <h2 class="content-title">个人资料</h2>
                
                <div class="user-info">
                    <div class="user-avatar">用</div>
                    <div class="user-details">
                        <h3>用户名</h3>
                        <p>user@example.com</p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="username">用户名</label>
                    <input type="text" id="username" class="form-input" value="用户名" placeholder="请输入用户名">
                </div>

                <div class="form-group">
                    <label class="form-label" for="email">邮箱</label>
                    <input type="email" id="email" class="form-input" value="user@example.com" placeholder="请输入邮箱">
                </div>

                <div class="form-group">
                    <label class="form-label" for="phone">手机号</label>
                    <input type="tel" id="phone" class="form-input" value="138****8888" placeholder="请输入手机号">
                </div>

                <div class="form-group">
                    <label class="form-label" for="bio">个人简介</label>
                    <textarea id="bio" class="form-input" rows="4" placeholder="介绍一下自己...">我是一个热爱学习和交流的用户，喜欢与各种历史人物和文学角色对话。</textarea>
                </div>
            </div>

            <!-- 语音偏好设置 -->
            <div id="voice-section" class="settings-section" style="display: none;">
                <h2 class="content-title">语音偏好</h2>

                <div class="form-group">
                    <label class="form-label" for="voice-speed">语音速度</label>
                    <div class="slider-group">
                        <div class="slider-container">
                            <input type="range" id="voice-speed" class="slider" min="0.5" max="2" step="0.1" value="1">
                            <span class="slider-value" id="speed-value">1.0x</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="voice-pitch">语音音调</label>
                    <div class="slider-group">
                        <div class="slider-container">
                            <input type="range" id="voice-pitch" class="slider" min="0.5" max="2" step="0.1" value="1">
                            <span class="slider-value" id="pitch-value">1.0x</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="voice-volume">音量</label>
                    <div class="slider-group">
                        <div class="slider-container">
                            <input type="range" id="voice-volume" class="slider" min="0" max="100" step="1" value="80">
                            <span class="slider-value" id="volume-value">80%</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="voice-language">默认语言</label>
                    <select id="voice-language" class="form-select">
                        <option value="zh-CN">中文</option>
                        <option value="en-US">英文</option>
                        <option value="auto">自动检测</option>
                    </select>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="auto-play" class="checkbox" checked>
                    <label for="auto-play" class="checkbox-label">自动播放AI回复语音</label>
                </div>

                <div class="checkbox-group">
                    <input type="checkbox" id="voice-feedback" class="checkbox" checked>
                    <label for="voice-feedback" class="checkbox-label">语音输入反馈</label>
                </div>
            </div>

            <!-- 对话历史 -->
            <div id="history-section" class="settings-section" style="display: none;">
                <h2 class="content-title">对话历史</h2>

                <div class="form-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="save-history" class="checkbox" checked>
                        <label for="save-history" class="checkbox-label">自动保存对话历史</label>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="history-retention">历史记录保留时间</label>
                    <select id="history-retention" class="form-select">
                        <option value="7">7天</option>
                        <option value="30" selected>30天</option>
                        <option value="90">90天</option>
                        <option value="forever">永久保存</option>
                    </select>
                </div>

                <div class="history-list">
                    <div class="history-item">
                        <div class="history-avatar">苏</div>
                        <div class="history-info">
                            <div class="history-character">苏格拉底</div>
                            <div class="history-time">2024-01-15 14:30</div>
                        </div>
                        <div class="history-actions">
                            <button class="history-action primary">继续对话</button>
                            <button class="history-action danger">删除</button>
                        </div>
                    </div>

                    <div class="history-item">
                        <div class="history-avatar">莎</div>
                        <div class="history-info">
                            <div class="history-character">莎士比亚</div>
                            <div class="history-time">2024-01-14 16:45</div>
                        </div>
                        <div class="history-actions">
                            <button class="history-action primary">继续对话</button>
                            <button class="history-action danger">删除</button>
                        </div>
                    </div>

                    <div class="history-item">
                        <div class="history-avatar">爱</div>
                        <div class="history-info">
                            <div class="history-character">爱因斯坦</div>
                            <div class="history-time">2024-01-13 10:20</div>
                        </div>
                        <div class="history-actions">
                            <button class="history-action primary">继续对话</button>
                            <button class="history-action danger">删除</button>
                        </div>
                    </div>
                </div>

                <div class="button-group">
                    <button class="btn btn-danger">清空所有历史</button>
                    <button class="btn btn-secondary">导出历史记录</button>
                </div>
            </div>

            <!-- 收藏角色 -->
            <div id="favorites-section" class="settings-section" style="display: none;">
                <h2 class="content-title">收藏角色</h2>

                <div class="favorites-grid">
                    <div class="favorite-item">
                        <div class="favorite-avatar">苏</div>
                        <div class="favorite-info">
                            <div class="favorite-name">苏格拉底</div>
                            <div class="favorite-category">历史人物</div>
                        </div>
                        <button class="favorite-remove">移除</button>
                    </div>

                    <div class="favorite-item">
                        <div class="favorite-avatar">莎</div>
                        <div class="favorite-info">
                            <div class="favorite-name">莎士比亚</div>
                            <div class="favorite-category">文学角色</div>
                        </div>
                        <button class="favorite-remove">移除</button>
                    </div>

                    <div class="favorite-item">
                        <div class="favorite-avatar">爱</div>
                        <div class="favorite-info">
                            <div class="favorite-name">爱因斯坦</div>
                            <div class="favorite-category">历史人物</div>
                        </div>
                        <button class="favorite-remove">移除</button>
                    </div>

                    <div class="favorite-item">
                        <div class="favorite-avatar">达</div>
                        <div class="favorite-info">
                            <div class="favorite-name">达芬奇</div>
                            <div class="favorite-category">历史人物</div>
                        </div>
                        <button class="favorite-remove">移除</button>
                    </div>
                </div>
            </div>

            <div class="button-group">
                <button class="btn btn-primary" onclick="saveSettings()">保存设置</button>
                <button class="btn btn-secondary" onclick="resetSettings()">重置</button>
            </div>
        </main>
    </div>

    <script>
        // 导航切换
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 移除所有active状态
                document.querySelectorAll('.nav-item').forEach(nav => nav.classList.remove('active'));
                document.querySelectorAll('.settings-section').forEach(section => section.style.display = 'none');
                
                // 添加当前active状态
                this.classList.add('active');
                
                // 显示对应内容
                const section = this.dataset.section;
                document.getElementById(section + '-section').style.display = 'block';
            });
        });

        // 滑块值更新
        document.getElementById('voice-speed').addEventListener('input', function() {
            document.getElementById('speed-value').textContent = this.value + 'x';
        });

        document.getElementById('voice-pitch').addEventListener('input', function() {
            document.getElementById('pitch-value').textContent = this.value + 'x';
        });

        document.getElementById('voice-volume').addEventListener('input', function() {
            document.getElementById('volume-value').textContent = this.value + '%';
        });

        // 保存设置
        function saveSettings() {
            const successMessage = document.getElementById('successMessage');
            successMessage.style.display = 'block';
            
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
        }

        // 重置设置
        function resetSettings() {
            if (confirm('确定要重置所有设置吗？')) {
                // 重置表单值
                document.getElementById('username').value = '用户名';
                document.getElementById('email').value = 'user@example.com';
                document.getElementById('phone').value = '138****8888';
                document.getElementById('bio').value = '我是一个热爱学习和交流的用户，喜欢与各种历史人物和文学角色对话。';
                
                document.getElementById('voice-speed').value = 1;
                document.getElementById('voice-pitch').value = 1;
                document.getElementById('voice-volume').value = 80;
                document.getElementById('speed-value').textContent = '1.0x';
                document.getElementById('pitch-value').textContent = '1.0x';
                document.getElementById('volume-value').textContent = '80%';
                
                document.getElementById('auto-play').checked = true;
                document.getElementById('voice-feedback').checked = true;
                document.getElementById('save-history').checked = true;
                document.getElementById('history-retention').value = '30';
                
                const successMessage = document.getElementById('successMessage');
                successMessage.textContent = '设置已重置';
                successMessage.style.display = 'block';
                
                setTimeout(() => {
                    successMessage.style.display = 'none';
                }, 3000);
            }
        }

        // 历史记录操作
        document.querySelectorAll('.history-action.primary').forEach(btn => {
            btn.addEventListener('click', function() {
                const characterName = this.closest('.history-item').querySelector('.history-character').textContent;
                // 这里可以根据角色名称跳转到对话页面
                alert(`继续与${characterName}对话`);
            });
        });

        document.querySelectorAll('.history-action.danger').forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('确定要删除这条历史记录吗？')) {
                    this.closest('.history-item').remove();
                }
            });
        });

        // 收藏角色操作
        document.querySelectorAll('.favorite-remove').forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('确定要移除这个收藏角色吗？')) {
                    this.closest('.favorite-item').remove();
                }
            });
        });

        // 表单实时保存（可选）
        document.querySelectorAll('.form-input, .form-select, .checkbox, .slider').forEach(input => {
            input.addEventListener('change', function() {
                // 这里可以添加自动保存逻辑
                console.log('设置已更改:', this.name || this.id, this.value || this.checked);
            });
        });
    </script>
</body>
</html>
